<template>
    <div class="mine">
        <div class="name-card">
            <div class="avatar">
                <img :src="profile.photo" alt="">
            </div>
            <div class="name-wrapper">
                <div class="name">{{ profile.name }}</div>
                <van-button round size="mini">申请认证</van-button>
            </div>
            <div class="time">
                <van-icon name="bookmark-o" size=".5rem" />
                <div class="text">今日阅读<br>{{ 5 }}分钟</div>
            </div>
        </div>
        <van-grid
            class="info"
            :border="false"
            :column-num="3"
        >
            <van-grid-item
                v-for="item in infoList"
                :key="item.txt"
                :text="item.txt"
            >
                <template #icon>
                    <div class="num">{{ item.num }}</div>
                </template>
            </van-grid-item>
        </van-grid>
        <van-grid
            :border="false"
            :column-num="3"
        >
            <van-grid-item
                v-for="item in pages"
                :key="item.txt"
                :text="item.txt"
            >
                <template #icon>
                    <van-icon
                        :name="item.icon"
                        :color="item.color"
                    />
                </template>
            </van-grid-item>
        </van-grid>
        <van-cell-group>
            <van-cell
                v-for="item in features"
                :key="item.title"
                :title="item.title"
                :to="item.path"
                is-link
            />
        </van-cell-group>
        <van-cell
            class="sign-out"
            @click="signOut"
        >
            退出登录
        </van-cell>
    </div>
</template>

<script src="./main.js"></script>

<style lang="less" scoped>
    @import url('./main.less');
</style>